<template>
  <div>
    <div class="common_title">
        <span style="font-size:20px;font-weight:bold">菜单管理</span>
      </div>
    <!-- 新增 -->
    <div class="query_bg">
        <!-- <span class="query_bg_addData" style="margin-left:20px">
            <el-button type="goon" icon="el-icon-plus" @click="addMenuClick" :size="size">新增</el-button>
        </span> -->
        <div class="grid-content bg-purple-light"></div>
    </div>
    <!-- <hr style='border:0.5px inset #FAFAFA;'> -->
    <!-- 数据列表框 -->
    <div  class="dataList_bg">
        <div class="dataList">
            <el-table ref="multipleTable" :size="size" :data="tableData" tooltip-effect="dark" style="width: 100%" :default-sort = "{prop: 'id', order: 'descending'}">
                <el-table-column header-align="center" sortable align="center" width="120" label="序号">
                    <template slot-scope="scope">
                    <span>{{(page - 1) * perPage + scope.$index + 1}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="menuParent" header-align="center" align="center" label="父级菜单ID"></el-table-column>
                <el-table-column prop="menuName" header-align="center" align="center" label="菜单名称"></el-table-column>
                <el-table-column prop="menuUrl" header-align="center" align="center" label="菜单地址"></el-table-column>
                <el-table-column prop="menuIcon" header-align="center" align="center" label="图标">
                    <template slot-scope="scope">
                    <i :class="scope.row.menuIcon || ''"></i>
                    </template>
                </el-table-column>
                <el-table-column prop="" label="操作" width="400" show-overflow-tooltip header-align="center" align="center">
                     <template slot-scope="scope">
                        <el-button round size="mini" @click="editMenuClick(scope.row)">编辑</el-button>
                        <!-- <el-button type="danger" round size="mini" @click="deleteMenuClick(scope.row)">删除</el-button> -->
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页 -->
        <div class="block" style="width:100%;text-align:right;margin-top:10px">
            <el-pagination @size-change="handleperPageChange" @current-change="handleCurrentChange" :current-page="page" :page-sizes="[10, 20, 50]"
            :page-size="perPage"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            ></el-pagination>
        </div>
        <!-- 新增/编辑界面 -->
        <el-dialog :title="operation ? '新增' : '编辑'" width="40%" :visible.sync="dialogVisible" :close-on-click-modal="false">
            <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="submitForm()" label-width="80px" :size="size" style="text-align:left;">
                <el-form-item label="顶级菜单" prop="menuLevel">
                    <el-radio-group v-model="dataForm.menuLevel" @click="selectRadio()">
                        <el-radio-button label="0">是</el-radio-button>
                        <el-radio-button label="1">否</el-radio-button>>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="父级菜单" prop="menuParent">
                    <el-select v-if="dataForm.menuLevel==0" disabled v-model="dataForm.menuParent" placeholder="请选择">
                        <el-option v-for="item in menuParents" :key="item.menuId" :label="item.menuName" :value="item.menuId"></el-option>
                    </el-select>
                    <el-select v-else v-model="dataForm.menuParent" placeholder="请选择">
                        <el-option v-for="item in menuParents" :key="item.menuId" :label="item.menuName" :value="item.menuId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="菜单名称" prop="menuName">
                    <el-input v-model="dataForm.menuName" placeholder="菜单"></el-input>
                </el-form-item>
                <!--         <el-form-item label="menuLevel" prop="menuLevel">
                <el-input v-model="dataForm.menuLevel" placeholder="menuLevel"></el-input>
                </el-form-item>-->
                <el-form-item label="menuUrl" prop="menuUrl">
                    <el-input v-model="dataForm.menuUrl" placeholder="menuUrl" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="menuIcon" prop="menuIcon">
                    <el-input v-model="dataForm.menuIcon" placeholder="menuIcon"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button :size="size" @click="dialogVisible = false">取消</el-button>
                <el-button :size="size" type="primary" @click="submitForm()">提交</el-button>
            </span>
        </el-dialog>
    </div>
  </div>
</template>

<script>

export default {
  data() {
      return {
        size: 'small',
        value: '',
        input: '',
        input1: '',
        page: 1, //当前页
        perPage: 10, //每页多少条数据
        total: 0, //总共多少条数据
        startUseValue:true,
        tableData: [],
        multipleSelection: [],
        dialogVisible: false,
        dialogVisible1: false, //详情界面
        operation: true, //true 新增,false 修改
        dataForm: {
            menuName: "",
            menuParent: "",
            menuLevel: 1,
            menuIcon: "",
            menuUrl: ""
        },
        dataRule: {
            menuName: [
            { required: true, message: "菜单名称不能为空", trigger: "change" }
            ]
        },
        menuParents: [],
      }
    },
    methods: {
        // 获取总量
        getCount: function() {
            this.$api.menu.count().then(res => {
                console.log(res);
                this.total = res.data.totalSize;
            });
        },
        // 获取数据
        findTreeData: function() {
            this.$api.menu.findByPage(this.page,this.perPage).then(res => {
                console.log(res);
                this.tableData = res.data.menuList;
                this.findAll();
                console.log(this.tableData);
            });
        },
        // 改变每页多少条数据
        handleperPageChange(val) {
            this.perPage = val;
            this.findTreeData()
        },
        // 换页刷新
        handleCurrentChange(val) {
            this.page = val;
            this.findTreeData()
        },
        // 获取一级菜单
        findAll: function() {
        this.$api.menu.findAll().then(res => {
            this.menuParents = res.data.filter(item => item.menuLevel == 0);
        });
        },
        // 新增
        addMenuClick() {
            this.dialogVisible = true;
            this.operation = true;
            this.dataForm = {
                menuName: "",
                menuParent: "",
                menuLevel: 1,
                menuIcon: "",
                menuUrl: ""
            };
            this.findAll();
        },
        // 编辑
        editMenuClick(row) {
            this.dialogVisible = true;
            this.operation = false;
            console.log(row);
            this.dataForm = Object.assign({}, row);
        },
        // 删除
        deleteMenuClick(row) {
            this.$confirm("确认删除选中菜单吗？", "提示", {
                type: "warning"
            }).then(() => {
                console.log(row);
                this.$api.menu.deleteMenu(row.menuId).then(res => {
                    this.findTreeData();
                    this.getCount();
                    this.$message({ message: "删除成功", type: "success" });
                    console.log(res);
                });
            }).catch(() => {});
        },
        // 表单提交
        submitForm() {
        this.$refs["dataForm"].validate(valid => {
            if (valid) {
                this.$confirm("确认提交吗？", "提示", {}).then(() => {
                    this.editLoading = true;
                    let params = Object.assign({}, this.dataForm);
                    console.log(params);
                    if (this.operation) {
                        this.$api.menu.addMenu(params).then(res => {
                            this.editLoading = false;
                            if (res.code == 200) {
                                this.$message({ message: "操作成功", type: "success" });
                                this.dialogVisible = false;
                                this.$refs["dataForm"].resetFields();
                            } else {
                                this.$message({
                                    message: "操作失败, " + res.msg,
                                    type: "error"
                                });
                            }
                            this.findTreeData();
                            this.getCount();
                        });
                    } else {
                        this.$api.menu.updateMenu(params).then(res => {
                            this.editLoading = false;
                            console.log(res);
                            if (res.code == 200) {
                                this.$message({ message: "操作成功", type: "success" });
                                this.dialogVisible = false;
                                this.$refs["dataForm"].resetFields();
                            } else {
                                this.$message({
                                    message: "操作失败, " + res.msg,
                                    type: "error"
                                });
                            }
                            this.findTreeData();
                            this.getCount();
                        });
                    }
                });
            }
        });
        },
    },
    mounted() {
        this.getCount();
        this.findTreeData();
    }
}
</script>

<style lang="less" scoped>
.common_title {
    margin-top: 20px;
}
.query_bg {
    height: 10px;
    line-height: 10px;
    margin-top: 10px;
    //   background-color: hotpink;
    .el-button--goon {
      color: #FFF;
      background-color: #37508D;
      border-color: #37508D;
    }

    .el-input, .el-select {
        width: 140px;
    }
}

.dataList_bg {
      height: 90%;
      margin-top: 5px;
    //   background-color: lawngreen;
}

</style>
